<template>
    <div>
        <div class="header ant-row-flex ant-row-flex-space-between ant-row-flex-middle">
            <div class="flex flex-column-center ant-col">
                <div class="flex flex-column-center">
<!--                    <div class="img-cover cover-style live-cover"-->
<!--                         :style="`backgroundImage: url(${anchor_head_img_url})`"></div>-->
                    <div class="flex-column">
<!--                        <span class="title">{{ anchor_nickname }}</span>-->
                        <span class="sub-title" style="font-size:16px;">
                            直播标题:
                            <span style="color:blue">{{ title }}</span> 
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 10px;">
<!--            <div style="padding: 10px;display: flex;justify-content: center;align-items: center;">-->
            <el-row>
                <el-col :span="11">
                    <el-card class="xingweijilu_contnet" shadow="hover">
                        <el-tabs v-model="activeName" @tab-click="dianji_tab">
                            <el-tab-pane :label="'在线('+persons_online+')'" name="onlinelist">
                                <online-list ref="onlinelist" v-if="activeName=='onlinelist'" :liveId="live_id"
                                     :prop_onlineUserList="onlineUserList"
                                     :prop_salerList="salerList"
                                     :prop_online_total="online_total"
                                     @getOnLineUser="getOnLineUser"
                                             @reloadOnUserList="reloadOnUserList"
                                >
                            </online-list>
                            </el-tab-pane>
                            
                            <el-tab-pane :label="'离线('+persons_offline+')'" name="offlinelist">
                                <offline-list ref="offlinelist" v-if="activeName=='offlinelist'" :liveId="live_id" 
                                :prop_offlineUserList="offlineUserList"  
                                :prop_salerList="salerList"
                                :prop_offline_total="offline_total"
                                  @getOffLineUser="getOffLineUser"
                                  @reloadOffUserList="reloadOffUserList"
                                >
                                </offline-list>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
                <el-col :span="12" style="margin-left: 30px;">
                    <el-card class="xingweijilu_contnet">
                        <el-tabs>
                            <el-tab-pane label="直播互动">
                                <ping-lun-list ref="pinglunlist" :liveId="live_id" :persons_online="persons_online"
                                :persons_offline="persons_offline"
                                               @loadUserProfile="loadUserProfile"
                                >
                                </ping-lun-list>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>

import {getSalerList,getLineUser,getPinglunList} from '@/api/live/liveonline';

import OnlineList from '../screen/listcomponents/OnlineList.vue';
import OfflineList from '../screen/listcomponents/OfflineList.vue';
import PingLunList from '../screen/listcomponents/PingLunList.vue';
import {getLiveInfo} from "@/api/live/screen";
import {getToken} from "@/common/token";
export default {
    name: 'LiveScreenList',
    components: {
        OnlineList,
        OfflineList,
        PingLunList,
    },
    data(){
      return {
          pageSize: 50, //一页显示多少条
          pageNumber: 1,
          online_total:0,
          offline_total:0,
          title:'',
          anchor_nickname:'',
          anchor_head_img_url:'',
          activeName: 'onlinelist',
          userid:'',
          persons_online:0,//直播互动 在线人数
          persons_offline:0,//直播互动 离线人数
          onlineUserList:[],//直播互动在线列表
          offlineUserList:[],//直播互动离线列表
          salerList:[],//直播互动销售列表
          pinglunList:[], //直播互动评论列表
          live_id:this.$route.query.liveId,
          timerIDOnline:null,
          timerIDOffline:null
      }  
    },
    created() {
        // 在组件创建后执行
        //this.init();
        this.getSalerList();
        this.getOnLineUser();
        this.getOffLineUser();
        
    },
    mounted() {
        // 设置定时器每10秒执行一次getLineUser方法
        // this.timerIDOnline = setInterval(this.getOnLineUser, 30000);
        // this.timerIDOffline = setInterval(this.getOffLineUser, 30000);
    },
    methods:{
        //初始化销售列表
        getSalerList(){
            getSalerList({
                "uid": 0,
            }).then((res)=>{
                console.log('getSalerList', res);
                if(res.code === 200){
                    this.salerList = res.data.list;
                }
            })
            return false;
        },
        getOnLineUser(data=''){
            if(data){
                this.pageNumber = data.pageNumber;
                this.pageSize = data.pageSize;
                this.userid = data.userid;
            }
            getLineUser({
                "online_status": 1,
                "live_id":this.live_id,
                "userid":this.userid,
                pageSize:this.pageSize,
                pageNumber:this.pageNumber
            }).then((res)=>{
                console.log('getOnLineUser', res);
                if(res.code === 200){
                    this.persons_online = res.data.total;
                    this.onlineUserList = res.data.list;
                    this.online_total = res.data.total;
                }
            })
            return false;
        },
        reloadOnUserList(data) {
            console.log('reloadonuser',data.userid);
            this.pageNumber = data.pageNumber;
            this.pageSize = data.pageSize;
            this.userid = data.userid;
            this.getOnLineUser();
        },
        reloadOffUserList(data) {
            console.log('reloadoffuser',data.userid);
            this.pageNumber = data.pageNumber;
            this.pageSize = data.pageSize;
            this.userid = data.userid;
            this.getOffLineUser();
        },
        loadUserProfile(res){
            console.log('[control] --加载用户信息成功!', res);
            this.title = res;
            // this.title = res.title;
            // this.anchor_nickname = res.anchor_nickname;
            // this.anchor_head_img_url = res.anchor_head_img_url;
        },
        getOffLineUser(data=''){
            if(data){
                this.pageNumber = data.pageNumber;
                this.pageSize = data.pageSize;
                this.userid = data.userid;
            }
            getLineUser({
                "online_status": 0,
                "live_id":this.live_id,
                "userid":this.userid,
                pageSize:this.pageSize,
                pageNumber:this.pageNumber
            }).then((res)=>{
                console.log('getOffLineUser', res);
                if(res.code === 200){
                    this.persons_offline = res.data.total;
                    this.offlineUserList = res.data.list;
                    this.offline_total = res.data.total;
                }
            })
            return false;
        },
        dianji_tab(tab, event) {
            console.log('[control] dianji_tab');
            console.log('[control] ', this.activeName);
            this.activeName = tab.name;
        },
        beforeDestroy() {
            // 清除定时器
            if (this.timerIDOnline) {
                clearInterval(this.timerIDOnline);
            }
            // 清除定时器
            if (this.timerIDOffline) {
                clearInterval(this.timerIDOffline);
            }
        }
    },
}
</script>

<style lang="scss" scoped>
/*@import "@/assets/css/common";*/

/*时钟*/
.wraper {
    text-align: center;
    background: #ffffff;
    height: 16px;
    font-size: 14px;
    font-weight: bolder;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    overflow:hidden;

}
.column {
    transition: transform 300ms;
}
.num {
    height: 16px;
}
.img-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}
.live-utils {
    padding: 0 .6rem;
    width: 100%;
}
.flex, .flex-column {
    display: flex;
}
.ant-avatar-square {
    border-radius: 4px;
}
.ant-avatar-image {
    background: transparent;
}
.ant-avatar {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
}
.ant-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
</style>
